<script setup lang="ts">
import { reactive } from 'vue'
import MessageList from '@/components/list/MessageList.vue'
import FooterTabbar from '@/components/FooterTabbar.vue'
import { messageStore } from '@/store/message'
import { userStore } from '@/store/user'

const store = messageStore()
const uStore = userStore() as any
store.getSystemMessageList()
store.getChatMessageList()

</script>

<template>
    <div class="message">
        <MessageList :messageList="store.systemMessageList" type="system" />
        <MessageList :messageList="store.messageList" :type="uStore.role == 1 ? 'talk' : 'talent'" />
    </div>
    <FooterTabbar></FooterTabbar>
</template>

<style scoped>
.message {
    margin-bottom: 3rem;
}
</style>